<template>
  <!-- 各区域成交额排行榜 -->
  <div class="areaAmount">
    <div class="title">
      <img src="../assets/img/省内各区域排行.png" alt="" />
    </div>
    <div class="titleList">
      <p class="font12 color97 line1">排名</p>
      <p class="font12 color97 line2">城市</p>
      <p class="font12 color97 line3">成交量</p>
      <p class="font12 color97">成交额</p>
    </div>
    <div class="scrollBox">
      <vue-seamless-scroll
        :data="luckyWinners"
        class="seamless-warp"
        :class-option="classOption"
      >
        <ul class="userList">
          <li v-for="(item, index) in luckyWinners" :key="index">
            <p class="order">{{ item.rank }}</p>
            <p class="area">{{ item.name }}</p>
            <p class="userCount">{{ item.userCount }}</p>
            <p class="money">￥{{ item.longGmv }}</p>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
export default {
  data() {
    return {
      luckyWinners: [],
      totalAxios:null
    };
  },
  created() {
    this.getInProvinceTop10();
    this.intervalAxios()
  },
  methods: {
    // 获取川内各区域前10
    async getInProvinceTop10() {
      let res = await getRequest(url.inProvinceTop10);
      if(res.data.code=='000000'){
        if(res.data.content.length!=0){
          this.luckyWinners = res.data.content;
          this.luckyWinners.map(obj=>{
            obj.longGmv=this.$parent.toThousands(obj.longGmv)
          })
        }
      }
    },
    // 4s请求一次
    intervalAxios(){
      this.totalAxios=setInterval(()=>{
        this.getInProvinceTop10()
      },3000)
    }
  },
  computed: {
    // 滚动的部分参数
    classOption() {
      return {
        step: 0.5,
        limitMoveNum: 1, //这个是修改moveSwitch()之前的使用方法，这里的数值指的是数据条数
        openTouch: false,
      };
    },
  },
  destroyed(){
    clearInterval(this.totalAxios)
  }
};
</script>

<style lang="less" scoped>
.areaAmount {
  margin-top: 41px;
  .title {
    text-align: left;
    img{
      width: 363px;
      height: 39px;
    }
  }
  .titleList {
    display: flex;
    margin: 12px 0;
    .line1 {
      margin: 0 64px 0 18px;
    }
    .line2 {
      margin-right: 92px;
    }
    .line3{
      margin-right: 91px;
    }
  }
  .scrollBox {
    width: 420px;
    height: 140px;
    .seamless-warp {
      height: 140px;
      overflow: hidden;
      .userList {
        li {
          display: flex;
          color: #dedee0;
          height: 28px;
          align-items: center;
          .order {
            width: 20px;
            margin-left: 26px;
            margin-right: 64px;
          }
          .userCount{
            width: 30px;
          }
          .area {
            width: 120px;
          }
          .money {
            width: 145px;
            text-align: right;
            // margin-right: 10px;
            color: #91E3F7;
          }
        }
        li:nth-child(odd) {
          background: rgba(23, 168, 189, 0.1);
        }
      }
    }
  }
}
</style>